<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>02结构性伪类选择器2</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        button:nth-of-type(1):active ~ ul li:first-child{/*孩子中的第1个*/
            background: mediumpurple;
        }
        button:nth-of-type(2):active ~ ul li:last-child{/*孩子中的最后1个*/
            background-color: brown;
        }
        button:nth-of-type(3):active ~ ul li:nth-child(2){/*孩子中的第2个*/
            background-color: darkgray;
        }
        button:nth-of-type(4):active ~ ul li:nth-last-child(2){/*孩子中的倒数第3个*/
            background-color: gold;
        }
        button:nth-of-type(5):active ~ #of h2:nth-child(odd){/*孩子中第奇数个元素如果是h2*/
            background: yellowgreen;
        }
        button:nth-of-type(6):active ~ #of h2:nth-child(even){/*孩子中第偶数个元素如果是h2*/
            background: yellowgreen;
        }
        button:nth-of-type(7):active ~ #of h2:nth-of-type(odd){/*孩子中的h2元素如果是第奇数个*/
            background: greenyellow;
        }
        button:nth-of-type(8):active ~ #of h2:nth-of-type(even){/*孩子中的h2元素如果是第偶数个*/
            background: greenyellow;
        }

        #loop li{/*清除前面的颜色影响*/
            background-color: white;
        }
        button:nth-of-type(9):active ~ #loop li:nth-child(4n+1){
            background-color: red;
        }
        button:nth-of-type(10):active ~ #loop li:nth-child(4n+2){
            background-color: orange;
        }
        button:nth-of-type(11):active ~ #loop li:nth-child(3n+1){
            background-color: yellow;
        }
        button:nth-of-type(12):active ~ #loop li:nth-child(4n){
            background-color: green;
        }

        button:nth-of-type(13):active ~ ul li:only-child{/*是独生子的*/
            background-color: pink;
            outline:black solid;
        }
    </style>
</head>
<body>
<h1>1-3结构性伪类选择器2</h1>
<h3>点击下面按钮，按下鼠标左键不抬起时请观察<span>列表A和列表B</span>选择结果</h3>

<button>ul li:first-child</button>li元素作为第一个孩子的元素背景为浅紫色<br>
<button>ul li:last-child</button>li元素作为最后一个孩子的元素背景为棕色<br>
<button>ul li:nth-child(2)</button>li元素作为第2个孩子的元素背景为深灰色<br>
<button>ul li:nth-last-child(3)</button>li元素作为倒数第3个孩子的元素背景为金黄色<br>

<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
<h2>列表B</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
<br>

<h3>点击下面按钮，按下鼠标左键不抬起时请观察<span>下列标题</span>的选择结果</h3>

<button>#of h2:nth-child(odd)</button>h2作为第奇数个孩子的元素背景为黄绿色（其实这些标题都是）<br>
<button>#of h2:nth-child(even)</button>h2作为第偶数个孩子的元素背景为黄绿色（其实没有）<br>
<button>#of h2:nth-of-type(odd)</button>孩子中所有h2元素的第奇数个背景为绿黄色<br>
<button>h2:nth-of-type(even)</button>孩子中所有h2元素的第偶数个背景为绿黄色<br>

<p><strong>下面的标题都是h2</strong></p>
<!--<code>&lt;div id="of"&gt;</code>-->
<div id="of">
    <h2>文章标题1</h2>
    <p>文章正文。。。</p>
    <h2>文章标题2</h2>
    <p>文章正文。。。</p>
    <h2>文章标题3</h2>
    <p>文章正文。。。</p>
    <h2>文章标题4</h2>
    <p>文章正文。。。</p>
    <h2>文章标题5</h2>
    <p>文章正文。。。</p>
    <h2>文章标题6</h2>
    <p>文章正文。。。</p>
</div>
<!--<code>&lt;/div&gt;</code>-->
<br>
<h3>点击下面按钮，按下鼠标左键不抬起时请观察<span>下面列表</span>的选择结果</h3>

<button>#loop li:nth-child(4n+1)</button>下面第4n+1个li元素的背景为红色<br>
<button>#loop li:nth-child(4n+2)</button>下面第4n+2个li元素的背景为橙色<br>
<button>#loop li:nth-child(3n+1)</button>下面第3n+1个li元素的背景为黄色<br>
<button>#loop li:nth-child(4n)</button>下面第4n个li元素的背景为绿色<br>
<button>li:only-child</button>如果li元素是独生子则背景为粉红色，并绘制轮廓<br>

<ul id="loop">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
    <li>列表项目6</li>
    <li>列表项目7</li>
    <li>列表项目8</li>
    <li>列表项目9</li>
    <li>列表项目10</li>
    <li>列表项目11</li>
    <li>列表项目12</li>
</ul>
<ul>
    <li>这个列表只有一个li元素</li>
</ul>
<br><br><br>
</body>
</html>